<template>
  <div class="content">
    <div class="handles">
      <Button type="primary" @click="exportData('0')">导出Excel</Button>
      <Button type="primary" @click="exportData('1')">导出</Button>
      <img />

    </div>
    <dt-grid ref="table" :columns="columns" :page='page' :cellHeight='80' :onFetch='onFetch' />
    <we-chat-details ref='detail'></we-chat-details>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage">
    </preview-image>
    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
  </div>
</template>

<script>
  import weChatDetails from './components/weChatDetails.vue'
  import columnOpt from './opt/weChatColumn.js'
  import publicCustomerMgr from '@/biz/customer/publicCustomer.js'
  import CustomerMgr from '@/biz/customer/customerOpt.js';
  import detailPage from '../details.vue'
  export default {
    components: {
      detailPage,
      weChatDetails
    },
    data() {
      return {

        columns: [],
        page: {
          total: 0,
          current: 1
        },
        showIndex: 0,
        preViewImg: [],
        detailsFlag: false,
        detailsParams: {},
      }
    },
    mounted() {
      CustomerMgr.columns() //获取意向等级 客户进度
      this.$refs.table.init(this, new columnOpt(this))
      this.$refs.table.fetch()
    },
    created() {},
    methods: {

      lookImg(val) {
        console.log(val, 'look');
        this.preViewImg = val
        this.$refs.preViewImage.show()
      },

      exportData(mask) {
        let params = {
          dto: this.paramsAll,
          maskCustomerPhone: mask
        }
        params.dto.buildingId = this.$dt.buildInfo().housesId
        publicCustomerMgr.downloadWechatClue(params)
      },

      // 列表数据
      onFetch(data) {
        this.paramsAll = data
        return publicCustomerMgr.wechatClueList(this.paramsAll).then(res => {
          this.page.total = res.total
          res.records.forEach(item => {
            if (item.featurePhoto) {
              item.featurePhoto = item.featurePhoto.split(',')
              if (!item.featurePhoto[item.featurePhoto.length - 1]) {
                item.featurePhoto.pop()
              }
            }
          });

          console.log(res.records, 'res.records');
          return res.records
        }).catch(err => {
          this.total = 0
        })

      },
      markCancel() {
        this.detailsFlag = false
      },

      // 查看详情
      viewClick(rows) {
        // this.$refs.detail.show(rows)
        console.log(rows, 'aaaaaaaaaaaaa');
        if (rows.isBind) {
          this.detailsFlag = true
          if (rows.didNotVisit) {
            this.detailsParams = {
              flag: 'clue',
              customerId: rows.customerId,
              userCustomerId: rows.relationUserCustomerId,
              // userId: rows.userId,
              buildingId: this.$dt.buildInfo().housesId,
              cityCode: this.$dt.buildInfo().cityId,
              isBind: rows.isBind

            }
          } else {
            this.detailsParams = {
              customerId: rows.customerId,
              userCustomerId: rows.relationUserCustomerId,
              // userId: rows.userId,
              buildingId: this.$dt.buildInfo().housesId,
              cityCode: this.$dt.buildInfo().cityId,
              isBind: rows.isBind

            }
          }

        }
        else {
          this.$refs.detail.show(rows)
        }

      },
      // 查看详情
      // viewClick(rows) {
      //   this.detailsFlag = true
      //   this.detailsParams = {
      //     flag: 'clue',
      //     customerId: rows.customerId,
      //     userCustomerId: rows.userCustomerId,
      //     userId: rows.userId,
      //     buildingId: this.$dt.buildInfo().housesId,
      //     cityCode: this.$dt.buildInfo().cityId,

      //   }
      // },

    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;
        cursor: pointer;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p:nth-child(2n) {
          border-right: 1px #ccc solid;
        }

        p.curr2 {
          span {
            color: red;
            font-weight: bold;
          }
        }

        p.curr {
          span {
            color: #2d8cf0;
            font-weight: bold;
          }
        }


      }

      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }
  }

  .handles {
    display: flex;

    align-items: center;
    margin-bottom: 10px;
    flex-direction: row-reverse;

    >* {
      margin-left: 10px;

    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }


  // 承接人
  .tips {
    background: rgba(254, 252, 236, 1);
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;

    span {
      color: #2d8cf0;
      margin-right: 20px;
    }

  }
</style>